<template>
  <tab-bar>
    <tab-bar-item path="/index" ActiveColor="red">
      <img slot='item-icon' src="@/assets/img/Index.svg" alt="">
      <img slot='item-icon-active' src="@/assets/img/index1.svg" alt="">
      <div slot="text">首页</div>
    </tab-bar-item>
    <tab-bar-item path="/cate" ActiveColor="red">
      <img slot='item-icon' src="@/assets/img/calss.svg" alt="">
      <img slot='item-icon-active' src="@/assets/img/class1.svg" alt="">
      <div slot="text">分类</div>
    </tab-bar-item>
    <tab-bar-item path="/shops" ActiveColor="red">
      <img slot='item-icon' src="@/assets/img/shop.svg" alt="">
      <img slot='item-icon-active' src="@/assets/img/shop1.svg" alt="">
      <div slot="text">购物车</div>
    </tab-bar-item>
    <tab-bar-item path="/user" ActiveColor="red">
      <img slot='item-icon' src="@/assets/img/user.svg" alt="">
      <img slot='item-icon-active' src="@/assets/img/user1.svg" alt="">
      <div slot="text">个人中心</div>
    </tab-bar-item>
  </tab-bar>
</template>

<script>
  import TabBar from '@/components/common/Tabbar/TabBar.vue';
  import TabBarItem from '@/components/common/Tabbar/TabBarItem.vue';
  export default {
    name: 'MainTabBar',
    components: {
      TabBar,
      TabBarItem
    }
  }
</script>

<style>

</style>